import React from 'react'
import { Card, Form, Input, Button, Switch, message, Upload } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { UploadOutlined } from '@ant-design/icons'

const { TextArea } = Input

export default () => {


    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <Form
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 11 }}
                    initialValues={{ web_enable: true, wap_enable: true }}
                >
                    <Form.Item label="网站标题" required>
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站LOGO" help="默认网站LOGO，通用头部显示，最佳显示尺寸为200px*60px" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button>
                                <UploadOutlined /> Upload
                        </Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="网站描述">
                        <TextArea rows={3} />
                    </Form.Item>
                    <Form.Item label="网站关键字" help="用于网站搜索引擎的优化，关键字之间请用英文逗号分隔">
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站地址">
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站公众号二维码" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button>
                                <UploadOutlined /> Upload
                        </Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="网站邮箱">
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站联系方式">
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站QQ">
                        <Input />
                    </Form.Item>
                    <Form.Item label="网站微信">
                        <Input />
                    </Form.Item>
                    <Form.Item label="手机端域名">
                        <Input />
                    </Form.Item>
                    <Form.Item label="电脑版是否启用" valuePropName="checked" name="web_enable">
                        <Switch />
                    </Form.Item>
                    <Form.Item label="手机版是否启用" valuePropName="checked" name="wap_enable">
                        <Switch />
                    </Form.Item>
                    <Form.Item label="网站关闭原因">
                        <TextArea rows={3} />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 3 }}>
                        <Button type="primary">保存</Button>
                    </Form.Item>
                </Form>
            </Card>
        </PageHeaderWrapper>
    )
}